<template>
	<view>
		
		<!-- 小程序顶部样式 -->
		<cu-custom bgColor="bg-gradual-orange" :isBack="false">
			<block slot="left">
				<text @tap="toPage()" class="cuIcon-back" style="font-size: 40rpx;"></text>
			</block>
			<block slot="content">账户中心</block>
		</cu-custom>
		
		
		<view class="bg-gradual-orange">
			<image src="https://image.weilanwl.com/gif/wave.gif" mode="scaleToFill" class="gif-black response" style="height:100upx"></image>
		</view>
		<view class="bg-white flex flex-row justify-around align-center" style="height: 200rpx;width: 100%;">
			<view class="flex justify-center align-center flex-direction" style="width: 50%;">
				<view class="margin text-orange">
					账户余额
				</view>
				<view>
					¥ {{ Number(account.amount).toFixed(2) }}
				</view>
			</view>
			<view class="flex justify-center align-center flex-direction solid-left" style="width: 50%;">
				<view class="margin text-blue">
					冻结余额
				</view>
				<view>
					¥ {{ Number(account.frozenMount).toFixed(2) }}
				</view>
			</view>
		</view>
		
		<view class="cu-list menu card-menu margin-top">
			<view class="cu-item arrow">
				<view @tap="widthdraw" class="content">
					<text class="cuIcon-redpacket text-grey"></text>
					<text class="text-grey">提现</text>
				</view>
			</view>
		</view>
		
		<view class="cu-modal" :class="modalName=='Modal'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">暂未提供提现功能</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					此功能正在开发，敬请期待
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				account: {},
				modalName: ''
			}
		},
		onLoad() {
			this.getAccount()
		},
		methods: {
			widthdraw(){
				this.modalName = 'Modal'
			},
			hideModal(){
				this.modalName = ''
			},
			async getAccount(){
				let res = await this.$api.getAccount()
				this.account = res.data.data
			},
			toPage(){
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style>
	
	@import "../../colorui/animation.css";
	
	image[class*="gif-"] {
		border-radius: 6upx;
		display: block;
	}

</style>
